<template>
  <view>
    <view v-for="(item,index) in taskList" class="task-box" :style="getTaskStyle(item)" @click="taskClick">
      <view class="task-title">{{ item.task_title }}</view>
      <view class="task-desc">{{ item.task_desc }}</view>
      <view class="task-create-time">发布时间：{{ item.create_date }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      taskList: [],
    }
  },
  onLoad() {
    this.getTaskList()
  },
  methods: {
    getTaskStyle(task) {
      let taskItem = {url: 'https://cdn3-banquan.ituchong.com/weili/l/903699481778585649.webp'}
      return {backgroundImage: `url('${taskItem.url}')`}
    },
    taskClick() {
      this.$u.route({url: 'pages/task/detail', params: {taskId: '1'}})
    },
    getTaskList() {
      this.$db.collection('plot-task').where({state: '1'}).get().then(res => {
        console.log(res)
        this.taskList = res.result.data
      })
    }
  }
}
</script>

<style scoped>
page {
  background-color: #ededed;
}

.task-box {
  background: white;
  padding: 10px;
  border-radius: 10px;
  margin: 10px 10px;
  /*background-size: 100%;*/
}

.task-title {
  font-size: larger;
  color: navajowhite;
}

.task-desc {
  color: white;
  margin-top: 10px;
}

.task-create-time {
  color: lightgrey;
  font-size: small;
  margin-top: 20px;
  text-align: right;
}
</style>
